<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        xList: [],
        yList: [],
        dataList: [],
        // 监测点名称
        name: '',
        data: []
      }
    },
    computed: {
      options() {
        return {
          title: {
            text: this.name +'方位角散点图'
          },
          legend: {
            data: ['位移方位角']
          },
          polar: {},
          angleAxis: {
            type: 'value',
            startAngle: 90,
            min:0,
            max:360,
            // 刻度标签
            axisLabel:{
              show:true,                  //是否显示刻度标签
              inside:true,                //标签朝内还是朝外
              rotate:80,                  //标签旋转角度
              margin:10,
              formatter:(value) => {  //标签内容格式化
                if(value === 0){
                  return '北'
                }else if(value === 90){
                  return '东'
                }else if(value === 180){
                  return '南'
                }else if(value === 270){
                  return '西'
                }else{
                  return  value +'°';
                }

              }
            },
          },
          radiusAxis: {
// 刻度标签
            axisLabel:{
              show:true,                  //是否显示刻度标签
              inside:true,                //标签朝内还是朝外
              margin:10,
              formatter:(value, index) => {  //标签内容格式化
                return  value +'mm';
              }
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              axis:'angle',
              type: 'line',
              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                contentArr.push(Format(new Date(data.value[2])))
                // data.seriesName + '值：'
                contentArr.push(data.marker + '方位角：'  + data.value[1].toFixed(1)+'°')
                contentArr.push(data.marker + '水平位移：'  + data.value[0].toFixed(1)+'mm')

              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },

          series: [
            {
              coordinateSystem: 'polar',
              name: '位移方位角',
              type: 'scatter',
              data: this.dataList,
            }
          ],
        }
      }
    },

    methods: {
      echartResize() {
        this.charts.resize()
      },
      updateEchart(xList, yList, name) {
        this.xList = xList;
        this.yList = yList;
        this.name = name;
        let dataList = []
        for (let i = 0; i < this.xList.length; i++) {
          let angle = Math.atan(this.yList[i][1]/this.xList[i][1])*180/Math.PI;
          if (this.yList[i][1] >= 0 && this.xList[i][1] >= 0) {

          } else if (this.yList[i][1] >= 0 && this.xList[i][1] < 0) {
            //第二象限
            angle = angle + 180;
          } else if (this.xList[i][1] < 0 && this.yList[i][1] < 0) {
            //第三象限
            angle = angle + 180;
          } else {
            //第四象限
            angle = angle + 360;
          }
          dataList.push([Math.sqrt(this.xList[i][1] ** 2 + this.yList[i][1] ** 2), angle,this.yList[i][0]])
        }
        this.dataList = dataList;


        this.initEcharts()
        this.charts.setOption(this.options)
        this.echartResize()
      },
    },
  }
</script>
